import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
//createWebHistory
import Home from "@/views/Home.vue";
import Main from "@/views/Main.vue";
export const home: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
];
export const menuRouter: Array<RouteRecordRaw> = [
  {
    path: "/Layout",
    name: "Layout",
    component: Main,
    meta: {
      title: "布局",
    },
    children: [
      {
        path: "commonStyle",
        name: "commonStyle",
        meta: {
          title: "Style 公共样式",
        },
        component: () => import("@/views/commonStyle/index.vue"),
      },
      {
        path: "Grid",
        name: "Grid",
        meta: {
          title: "Grid 栅格",
        },
        component: () => import("@/views/Grid/index.vue"),
      },
      {
        path: "Flexbox",
        name: "Flexbox",
        meta: {
          title: "Flexbox 伸缩布局盒",
        },
        component: () => import("@/views/Flexbox/index.vue"),
      },
      {
        path: "Divider",
        name: "Divider",
        meta: {
          title: "Divider 分割线",
        },
        component: () => import("@/views/Divider/index.vue"),
      },
    ],
  },
  {
    path: "/Basics",
    name: "Basics",
    component: Main,
    meta: {
      title: "基础",
    },
    children: [
      {
        path: "Button",
        name: "Button",
        meta: {
          title: "Button 按钮",
        },
        component: () => import("@/views/Button/index.vue"),
      },
      {
        path: "Cell",
        name: "Cell",
        meta: {
          title: "Cell 单元格",
        },
        component: () => import("@/views/Cell/index.vue"),
      },
      {
        path: "Icon",
        name: "Icon",
        meta: {
          title: "Icon 图标",
        },
        component: () => import("@/views/Icon/index.vue"),
      },
      {
        path: "Image",
        name: "Image",
        meta: {
          title: "Image 图片",
        },
        component: () => import("@/views/Image/index.vue"),
      },
    ],
  },
  {
    path: "/Forms",
    name: "Forms",
    component: Main,
    meta: {
      title: "表单",
    },
    children: [
      {
        path: "Input",
        name: "Input",
        meta: {
          title: "Input 输入框",
        },
        component: () => import("@/views/Input/index.vue"),
      },
      {
        path: "Form",
        name: "Form",
        meta: {
          title: "Form 表单",
        },
        component: () => import("@/views/Form/index.vue"),
      },
      {
        path: "Checkbox",
        name: "Checkbox",
        meta: {
          title: "Checkbox 复选框",
        },
        component: () => import("@/views/Checkbox/index.vue"),
      },
      {
        path: "Radio",
        name: "Radio",
        meta: {
          title: "Radio 单选框",
        },
        component: () => import("@/views/Radio/index.vue"),
      },
      {
        path: "Cascader",
        name: "Cascader",
        meta: {
          title: "Cascader 级联选择",
        },
        component: () => import("@/views/Cascader/index.vue"),
      },
      {
        path: "Rate",
        name: "Rate",
        meta: {
          title: "Rate 评分",
        },
        component: () => import("@/views/Rate/index.vue"),
      },
      {
        path: "DatetimePicker",
        name: "DatetimePicker",
        meta: {
          title: "DatetimePicker 时间选择",
        },
        component: () => import("@/views/DatetimePicker/index.vue"),
      },
      {
        path: "NumberKeyboard",
        name: "NumberKeyboard",
        meta: {
          title: "NumberKeyboard 数字键盘",
        },
        component: () => import("@/views/NumberKeyboard/index.vue"),
      },
      {
        path: "PasswordInput",
        name: "PasswordInput",
        meta: {
          title: "PasswordInput 密码输入框",
        },
        component: () => import("@/views/PasswordInput/index.vue"),
      },
      {
        path: "Picker",
        name: "Picker",
        meta: {
          title: "Picker 联动选择器",
        },
        component: () => import("@/views/Picker/index.vue"),
      },
      {
        path: "Calendar",
        name: "Calendar",
        meta: {
          title: "Calendar 日历",
        },
        component: () => import("@/views/Calendar/index.vue"),
      },
      {
        path: "Slider",
        name: "Slider",
        meta: {
          title: "Slider 滑动输入条",
        },
        component: () => import("@/views/Slider/index.vue"),
      },
      {
        path: "Number",
        name: "Number",
        meta: {
          title: "Number 数字选择器",
        },
        component: () => import("@/views/Number/index.vue"),
      },
      {
        path: "Switch",
        name: "Switch",
        meta: {
          title: "Switch 开关",
        },
        component: () => import("@/views/Switch/index.vue"),
      },
      {
        path: "Uploader",
        name: "Uploader",
        meta: {
          title: "Uploader 上传",
        },
        component: () => import("@/views/Uploader/index.vue"),
      },
    ],
  },
  {
    path: "/Menus",
    name: "Menus",
    component: Main,
    meta: {
      title: "导航",
    },
    children: [
      {
        path: "Collapse",
        name: "Collapse",
        meta: {
          title: "Collapse 折叠面板",
        },
        component: () => import("@/views/Collapse/index.vue"),
      },
      {
        path: "DropdownMenu",
        name: "DropdownMenu",
        meta: {
          title: "DropdownMenu 下拉菜单",
        },
        component: () => import("@/views/DropdownMenu/index.vue"),
      },
      {
        path: "IndexBar",
        name: "IndexBar",
        meta: {
          title: "IndexBar 索引栏",
        },
        component: () => import("@/views/IndexBar/index.vue"),
      },
      {
        path: "NavBar",
        name: "NavBar",
        meta: {
          title: "NavBar 导航栏",
        },
        component: () => import("@/views/NavBar/index.vue"),
      },
      {
        path: "Search",
        name: "Search",
        meta: {
          title: "Search 搜索栏",
        },
        component: () => import("@/views/Search/index.vue"),
      },
      {
        path: "Sidebar",
        name: "Sidebar",
        meta: {
          title: "Sidebar 侧边导航",
        },
        component: () => import("@/views/Sidebar/index.vue"),
      },
      {
        path: "Tabs",
        name: "Tabs",
        meta: {
          title: "Tabs 选项卡",
        },
        component: () => import("@/views/Tabs/index.vue"),
      },
      {
        path: "Tabbar",
        name: "Tabbar",
        meta: {
          title: "Tabbar 底部导航",
        },
        component: () => import("@/views/Tabbar/index.vue"),
      },
      {
        path: "TreeSelect",
        name: "TreeSelect",
        meta: {
          title: "TreeSelect 分类选择",
        },
        component: () => import("@/views/TreeSelect/index.vue"),
      },
      {
        path: "Pagination",
        name: "Pagination",
        meta: {
          title: "Pagination 分页",
        },
        component: () => import("@/views/Pagination/index.vue"),
      },
    ],
  },
  {
    path: "/Feedback",
    name: "Feedback",
    component: Main,
    meta: {
      title: "反馈",
    },
    children: [
      {
        path: "SwipeCell",
        name: "SwipeCell",
        meta: {
          title: "SwipeCell 滑动单元格",
        },
        component: () => import("@/views/SwipeCell/index.vue"),
      },
      {
        path: "Loading",
        name: "Loading",
        meta: {
          title: "Loading 加载",
        },
        component: () => import("@/views/Loading/index.vue"),
      },
      {
        path: "Notify",
        name: "Notify",
        meta: {
          title: "Notify 消息提示",
        },
        component: () => import("@/views/Notify/index.vue"),
      },
      {
        path: "Overlay",
        name: "Overlay",
        meta: {
          title: "Overlay 遮罩层",
        },
        component: () => import("@/views/Overlay/index.vue"),
      },
      {
        path: "Popover",
        name: "Popover",
        meta: {
          title: "Popover 气泡弹出框",
        },
        component: () => import("@/views/Popover/index.vue"),
      },
      {
        path: "Popup",
        name: "Popup",
        meta: {
          title: "Popup 弹出层",
        },
        component: () => import("@/views/Popup/index.vue"),
      },
      {
        path: "Toast",
        name: "Toast",
        meta: {
          title: "Toast 提示窗",
        },
        component: () => import("@/views/Toast/index.vue"),
      },
      {
        path: "Dialog",
        name: "Dialog",
        meta: {
          title: "Dialog 弹出框",
        },
        component: () => import("@/views/Dialog/index.vue"),
      },
      {
        path: "ActionSheet",
        name: "ActionSheet",
        meta: {
          title: "ActionSheet 动作面板",
        },
        component: () => import("@/views/ActionSheet/index.vue"),
      },
    ],
  },
  {
    path: "/Displaying",
    name: "Displaying",
    component: Main,
    meta: {
      title: "视图",
    },
    children: [
      {
        path: "Badge",
        name: "Badge",
        meta: {
          title: "Badge 徽标",
        },
        component: () => import("@/views/Badge/index.vue"),
      },
      {
        path: "Circle",
        name: "Circle",
        meta: {
          title: "Circle 环形进度条",
        },
        component: () => import("@/views/Circle/index.vue"),
      },
      {
        path: "Empty",
        name: "Empty",
        meta: {
          title: "Empty 空状态",
        },
        component: () => import("@/views/Empty/index.vue"),
      },
      {
        path: "ImagePreview",
        name: "ImagePreview",
        meta: {
          title: "ImagePreview 图片预览",
        },
        component: () => import("@/views/ImagePreview/index.vue"),
      },
      {
        path: "List",
        name: "List",
        meta: {
          title: "List 列表",
        },
        component: () => import("@/views/List/index.vue"),
      },
      {
        path: "Card",
        name: "Card",
        meta: {
          title: "Card 卡片视图",
        },
        component: () => import("@/views/Card/index.vue"),
      },
      {
        path: "NoticeBar",
        name: "NoticeBar",
        meta: {
          title: "NoticeBar 通知栏",
        },
        component: () => import("@/views/NoticeBar/index.vue"),
      },
      {
        path: "Progress",
        name: "Progress",
        meta: {
          title: "Progress 进度条",
        },
        component: () => import("@/views/Progress/index.vue"),
      },
      {
        path: "PullRefresh",
        name: "PullRefresh",
        meta: {
          title: "PullRefresh 下拉刷新",
        },
        component: () => import("@/views/PullRefresh/index.vue"),
      },
      {
        path: "Steps",
        name: "Steps",
        meta: {
          title: "Steps 步骤条",
        },
        component: () => import("@/views/Steps/index.vue"),
      },
      {
        path: "Sticky",
        name: "Sticky",
        meta: {
          title: "Sticky 固定元素",
        },
        component: () => import("@/views/Sticky/index.vue"),
      },
      {
        path: "Swipe",
        name: "Swipe",
        meta: {
          title: "Swipe 轮播",
        },
        component: () => import("@/views/Swipe/index.vue"),
      },
      {
        path: "Tag",
        name: "Tag",
        meta: {
          title: "Tag 标签",
        },
        component: () => import("@/views/Tag/index.vue"),
      },
      {
        path: "Table",
        name: "Table",
        meta: {
          title: "Table 表格",
        },
        component: () => import("@/views/Table/index.vue"),
      },
    ],
  },
];

const routes: Array<RouteRecordRaw> = [...home, ...menuRouter];
const router = createRouter({
  history: createWebHashHistory(), //process.env.BASE_URL
  routes,
});

router.beforeEach((to, from, next) => {
  next();
});

router.afterEach((to) => {
  window.scrollTo(0, 0);
});

export default router;
